<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>05 $emit 父子组件及组件间数据传递</title>
    <script src="../js/vue.min.js"></script>
    <script src="../js/axios.min.js"></script>
</head>
<body>
<div id="app">
    <my-hello></my-hello>
</div>

<template id="hello">
    <div>
        <h3>我是hello父组件</h3>
        <h3>访问自己的数据：{{msg}},{{name}},{{age}},{{user.username}}</h3>
        <h3>访问子组件的数据：{{sex}},{{height}}</h3>
        <hr>

        <my-world :message="msg" :name="name" :age="age" @e-world="getData"></my-world>
    </div>
</template>

<template id="world">
    <div>
        <h4>我是world子组件</h4>
        <h4>访问父组件中的数据：{{message}},{{name}},{{age}},{{user.username}}</h4>
        <h4>访问自己的数据：{{sex}},{{height}}</h4>
        <button @click="send">将子组件的数据向上传递给父组件</button>
    </div>
</template>


<script>

    let vm = new Vue({ // 这里的vm也是一个组件，称为根组件Root
        el: "#app",
        components: {
            'my-hello': { // 父组件
                data() {
                    return {
                        msg: 'root com',
                        name: 'tom',
                        age: 23,
                        user: {id: 9527, username: '唐伯虎'},
                        sex: '',
                        height: ''
                    }
                },
                methods: {
                    getData(sex, height) {
                        this.sex = sex;
                        this.height = height;
                    }
                },
                template: '#hello',
                components: {
                    'my-world': { //子组件
                        data() {
                            return {
                                sex: 'male',
                                height: 180.5
                            }
                        },
                        template: "#world",
                        // props:['message','name','age','user'] //简单的字符串数组
                        props: { // 也可以是对象，允许配置高级设置，如类型判断、数据校验、设置默认值
                            message: String,
                            name: {
                                type: String,
                                required: true
                            },
                            age: {
                                type: Number,
                                default: 18,
                                validator: (value) => {
                                    return value >= 0;
                                }
                            },
                            user: {
                                type: Object,
                                default: () => {
                                    // 对象或数组的默认值必须使用函数的形式来返回
                                    return {id: 3306, username: '秋香'};
                                }
                            }
                        },
                        methods: {
                            send() {
                                // console.log(this);  //此处的this表示当前子组件实例
                                this.$emit('e-world', this.sex, this.height); //使用$emit()触发一个事件，发送数据
                            }
                        }
                    }
                }

            }
        }
    })
</script>
</body>
</html>